<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品中心</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入本页面css样式表 -->
</head>
<body>
    <!-- 头部开始 -->
    <header class="header">
        <!-- 工具条开始 -->
        <div class="toolbar-bg">
            <div class="toolbar">
                <p class="fl">全国服务热线：400-000-0000</p>
                <span class="fr">
                    <a href="javascript:;">设为首页</a>
                    <a href="javascript:;">加入收藏</a>
                </span> 
            </div>
        </div>
        <!-- 工具条结束 -->
        <!-- logo和导航开始 -->
        <div class="logo-nav-bg">
            <div class="logo-nav">
                <a href="index.html" class="fl logo">
                    <img src="images/logo.png" alt="">
                </a>
                <ul class="fr nav">
                        <li><a href="" class="cur"><span>首页 &nbsp;Home</span></a></li>
                        <li><a href=""><span>关于我们About</span></a></li>
                        <li><a href=""><span>产品中心Products</span></a></li>
                        <li><a href=""><span>服务支持Service</span></a></li>
                        <li><a href=""><span>新闻中心News</span></a></li>
                        <li><a href=""><span>在线商店Shop</span></a></li>
                        <li><a href=""><span>联系我们Contact Us</span></a></li>
                </ul>
            </div>
        </div>   
        <!-- logo和导航结束 -->
    </header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <section class="content">
        <!-- 轮播图开始 -->
        <section class="banner">
            <a href="" class="banner-link">
                <img src="./images/banner.jpg" width="100%" height="218px" alt="">
            </a> 
        <section>
        <!-- 轮播图结束 -->
        <!-- 产品内容开始 -->
        <section class="product">
            <section class="bread-crumb">
                <a href="index.html">首页</a>
                >
                <span>新品发布</span>
            </section>
            <section class="nav">
                <ul>
                    <li><a href="" class="cur">百万高清系列</a>
                    <li><a href="" class="cur1">标清系列</a>
                    <li><a href="" class="cur1">户外防水系列</a>
                    <li><a href="" class="cur1">室内系列</a>
                </ul>
            </section>
            <section class="search-box">
                <form action="" method="">
                    <input type="text" name="keyword" value="" placeholder="搜索产品" >
                    <input type="submit" value="">
                </form>
            </section>
            <div class="clear"></div>

            <div class="box">
                <div class="dabox">
                <div class="box1"><img src="./images/box1.jpg"></div>
                <h5>S6202Y-WR</h5>
                <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
            </div>
            <div class="dabox">
                    <div class="box1"><img src="./images/box2.jpg"></div>
                    <h5>S6202Y-WR</h5>
                    <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
            </div>
            <div class="dabox">
                    <div class="box1"><img src="./images/box3.jpg"></div>
                    <h5>S6202Y-WR</h5>
                    <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
            </div>
            <div class="dabox">
                    <div class="box1"><img src="./images/box4.jpg"></div>
                    <h5>S6202Y-WR</h5>
                    <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
            </div>
            <div class="dabox">
                    <div class="box1"><img src="./images/box5.jpg"></div>
                    <h5>S6202Y-WR</h5>
                    <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
             </div>
            <div class="dabox">
                    <div class="box1"><img src="./images/box6.jpg"></div>
                    <h5>S6202Y-WR</h5>
                    <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
            </div>
            <div class="dabox">
            <div class="box1"><img src="./images/box7.jpg"></div>
                    <h5>S6202Y-WR</h5>
                    <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
            </div>
            <div class="dabox">
            <div class="box1"><img src="./images/box8.jpg"></div>
                    <h5>S6202Y-WR</h5>
                    <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
            </div>
            <div class="dabox">
                    <div class="box1"><img src="./images/box9.jpg"></div>
                    <h5>S6202Y-WR</h5>
                     <p>100万无线高清 64GB TF卡 语音对讲 智能连接 手机....</p>
            </div>
            </div>
            <section class="page">
                <a href="" class="prev">上一页</a>
                <span href="" class="cur">1</span>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="">5</a>
                <a href="">6</a>
                <a href="" class="next">下一页</a>
            </section> 
        <!-- 产品内容结束 -->
         
        </section>
    <!-- 内容结束 -->

    <!-- 尾部开始-->
    <footer class="footer">
            <div class="chonglan">关注我们：</div>
            <ul>
                <li>网站首页 ·</li>
                <li>新闻动态 ·</li>
                <li>关于我们 ·</li>
                <li>团队风采 ·</li>
                <li>联系我们 ·</li>
                <li>在线留言</li>
            </ul>
        </footer>
    
        <div class="banquan">
            <a href="">©2015 TK科技有限公司  版权所有沪ICP证13022560号-7 All Rights Reserved</a>
        </div>

    </footer>
    <!-- 尾部结束 -->
</body>
</html>
